/**===================
 * 变量的声明
 * DOM缓存
 * ===================*/
// 获取 html 元素
var html = document.documentElement;
var table = document.getElementsByClassName('gameTable')[0];
// 选项卡
var selectModel = document.getElementsByClassName('selectModel')[0];
var gameOver = document.getElementsByClassName('gameOver')[0];
var restart = document.getElementsByClassName('restart')[0];
var easy = document.getElementById('easy');
var time = document.getElementById('time');
var mine = document.getElementById('mine');
var tbody = table.firstElementChild.firstElementChild;
//用户是否出错
var flag = true;



/**
 * 初始化棋盘方法：4行3列的表格
 * 新增一行方法（按键位置随机，）
 * 向下移动的动画方法
 */
var layout = {
    // 初始化棋盘，自调
    initialization: function () {
            // 随机生成四个黑色块，每行一个
            for (var i=0; i<4; i++){
                for (var j=0; j<3; j++){
                    table.firstElementChild.firstElementChild.children[i].children[j].style.backgroundColor = '';
                }
                // 三个随机数，这个数决定了每行第几个会变黑
                var num = Math.round(Math.random() * 2);
                var style = table.firstElementChild.firstElementChild.children[i].children[num].style;
                style.backgroundColor = '#333'
            }
        },

    /**
     * value === true 向下移动
     * 消除最后一行（第4行）
     * 最上方添加一行
     *
     * 涉及到的知识点： 需要用到 DOM 中删除最后一个节点和增加新节点：
     * Element对象用于查找元素： firstElementChild（第一个子元素），lastElementChild（最后一个子元素）
     * Node 对象用于删除增加元素： removeChild()（删除节点），insertBefore()（指定节点之前插入节点）
     *
     * @param value boolean
     */
    move: {
        value: function (value){
            if (value === true){
                var firstLine = table.firstElementChild.firstElementChild.children[0];
                var forthLine = table.firstElementChild.firstElementChild.children[3];

                // 删除最后一行
                tbody.removeChild(forthLine);

                // 新建tr节点
                var newTr = document.createElement('tr');
                // 为 tr 新增 td
                var newTd1 = document.createElement('td');
                var newTd2 = document.createElement('td');
                var newTd3 = document.createElement('td');

                // 为新增的 newTr 添加td
                newTr.appendChild(newTd1);
                newTr.appendChild(newTd2);
                newTr.appendChild(newTd3);

                // 为 td 随机生成黑块
                var randomNewTd = newTr.children[Math.round(Math.random() * 2)]
                // 设置style
                randomNewTd.style.background = '#333';
                //添加到tbody
                tbody.insertBefore(newTr, firstLine);
            }
        },
        enumerable: true
    }
};



/**
 * 键盘敲击事件绑定的方法
 * 判断是否敲击正确的方法
 */
var keyDown = Object.create(layout, {
    keypress: function (event){
        // 若按键正确则进行后序操作
        if (this.isTrue(event.key, this.isBlock())){
            move(true);
        }else{
            flag = false;
        }
    },
    // 判断最后一行哪个块为黑
    isBlock: function(){
            // 检测最后一行中为黑色块的索引位置
            for (var i=0; i<3; i++){
                // 获取 style （有待优化，for循环损耗性能，并且每次都需要查询DOM树）
                var style = table.firstElementChild.firstElementChild.children[3].children[i].style;
                //若其中 backgroundColor 不为 '' 则返回它的索引位置 +1
                if (style.backgroundColor !== ''){
                    return i+1;
                }
            }
    },

    // 判断是否敲击正确的方法
    isTrue: {
        value: function(value, index){
            // 若用户按下了 j=1 k=2 l=3 正确返回 true
            return value === 'j' && index === 1 || value === 'k' && index === 2 || value === 'l' && index === 3;
        },
        enumerable: true
    },

    // 绑定键盘敲击事件
    userKeyDown: {
        value: function (){
            html.addEventListener('keypress', keyDown.keypress());
        }
    }
});



/**
 * 初始化游戏方法（继承 layout）
 * 游戏交互逻辑方法（继承keyDown的两个方法：move移动，isTrue按键是否正确）在这个对象中将两个方法做了合并
 * 结束游戏逻辑方法
 * 重新开始游戏方法（继承layout）
 */
var game = Object.create(keyDown, {
    startGame: {
        value: function (){
            // 当普通模式被点击游戏开始，否则没用
            easy.addEventListener('click', function (){
                layout.initialization();
                selectModel.style.display = 'none';

                keyDown.userKeyDown();

                var seconds = document.getElementsByClassName('seconds')[0];
                // 计时器中的秒数
                var num = 0;
                // 一毫秒刷新一次计时器
                var t = setInterval(function () {
                    if (!flag){
                        html.removeEventListener('keypress',keypress)
                        // 显示游戏失败界面
                        gameOver.style.display = 'block';
                        restart.style.display = 'block';

                        // 清除计时器
                        clearInterval(t);
                    }
                    num += 0.01;
                    // 显示两位小数
                    seconds.textContent = num.toFixed(2)+'秒';
                },  10);
            });

            // 待开发
            time.addEventListener('click',function (){
                alert('开发中哦....')
            })
            mine.addEventListener('click',function (){
                alert('开发中哦....')
            })
        },
        enumerable: true
    },

    restart: {
        value: function (){
            selectModel.style.display = 'block';
            gameOver.style.display = 'none';
            flag = true;
        },
        enumerable: true
    }
});

// easy.addEventListener('click', game.startGame);
// restart.addEventListener('clikc', game.restart);

game.startGame();

console.log(keyDown.isBlock)
console.log(keyDown.isTrue)
console.log(keyDown.userKeyDown)